<template>
	<div class="my-chart-data-pond-list">
		<n-timeline class="pond-item-timeline" style="width: 20px">
			<n-timeline-item type="info"> </n-timeline-item>
			<n-timeline-item type="success"></n-timeline-item>
		</n-timeline>
		<div class="pond-item-box p-r-10">
			<!-- 新增 -->
			<n-button class="w100" ghost @click="createPond">
				创建
				<template #icon>
					<n-icon>
						<DuplicateOutline></DuplicateOutline>
					</n-icon>
				</template>
			</n-button>
			<n-divider class="m-y-10"></n-divider>
			<n-space v-if="!$store.chart.requestDataPond.length" justify="center">
				<n-text class="not-layer-text" :depth="3">
					暂无数据内容，
					<n-a @click="createPond">立即创建</n-a>
				</n-text>
			</n-space>
			<n-scrollbar style="max-height: 490px">
				<div
					v-for="item in $store.chart.requestDataPond"
					:key="item.dataPondId"
					:class="{ select: item.dataPondId === selectPondId }"
					class="pond-item"
					@click="clickHandle(item)"
				>
					<div :class="{ 'select-modal': item.dataPondId === selectPondId }"></div>
					<div class="item-content">
						<div class="item-content-body">
							<div>
								<n-tag
									class="m-r-5"
									size="small"
									:type="item.dataPondId === selectPondId ? 'warning' : ''"
									:bordered="false"
								>
									名称
								</n-tag>
								<n-ellipsis style="max-width: 180px">
									{{ item.dataPondName }}
								</n-ellipsis>
							</div>
						</div>
						<div class="item-content-icon" @click="deletePond($event, item)">
							<n-icon>
								<trash></trash>
							</n-icon>
						</div>
					</div>
				</div>
			</n-scrollbar>
		</div>
	</div>
</template>

<script setup>
const emit = defineEmits(['createPond', 'deletePond']);

// 选中的接口数据
const selectPondId = computed(() => $store.chart.getTargetData.orgConfig.request.dataPondId);

// 创建数据池
function createPond() {
	emit('createPond', true);
}

// 删除数据池
const deletePond = (target, targetData) => {
	// 阻止默认事件
	target.stopPropagation();
	target.preventDefault();
	emit('deletePond', targetData);
};

// 选中
const clickHandle = (item) => {
	$store.chart.getTargetData.orgConfig.request.dataPondId = item.dataPondId;
};
</script>

<style scoped lang="scss">
$height: 530px;
$listWidth: 280px;
$centerMiniHeight: 28px;
$textSize: 10px;

@include b('chart-data-pond-list') {
	padding-top: 10px;
	padding-bottom: 5px;
	margin-right: 5px;
	display: flex;
	.pond-item-timeline > .n-timeline-item {
		&:first-child {
			height: $height;
		}
	}
	.pond-item-box {
		width: $listWidth;
		position: relative;
		.create-btn {
			width: calc(#{$listWidth - 15px});
			margin-right: 15px;
		}
		.pond-item {
			position: relative;
			margin-bottom: 10px;
			border-radius: 5px;
			cursor: pointer;
			border: 1px solid rgba(0, 0, 0, 0);
			box-sizing: border-box;
			background: var(--color-bg-3);
			transition: all 0.3s;
			&.hover,
			&:hover {
				border: 1px solid var(--el-color-primary);
				background: var(--color-bg-4);
			}
			&:hover {
				:deep(.icon-item) {
					opacity: 1;
				}
				.item-content-icon {
					opacity: 1 !important;
				}
			}

			&.select {
				border: 1px solid var(--el-color-primary);
				background-color: rgba(0, 0, 0, 0);
			}

			.item-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5px;
				.item-content-body {
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 5px;
				}
				.item-content-icon {
					opacity: 0;
					padding-left: 5px;
				}
			}

			.select-modal {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0.3;
				background-color: var(--el-color-primary);
			}
		}
	}
}
</style>
